<template>
    <div>
        <div class="search-title">
            <el-form ref="formName" :model="ruleForm" class="form-inline" size="small">
                <el-form-item label="案件类型">
                    <el-select v-model="ruleForm.caseType" placeholder="案件类型">
                        <el-option class="my-select-option" v-for="(item, i) in caseTypeList" :key="i + 'type'"
                            :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始日期">
                    <el-date-picker v-model="ruleForm.startDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="ruleForm.endDate" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="坐席人员" prop="caseNumber">
                    <el-input v-model="ruleForm.seatUserId" placeholder="请输入坐席姓名或工号" clearable></el-input>
                </el-form-item>
                <el-form-item label="条件筛选" prop="caseNumber">
                    <el-input v-model="ruleForm.caseNumber" placeholder="请输入报案号/车牌号/修理厂名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="案件状态">
                    <el-select v-model="ruleForm.taskStatus" placeholder="案件状态">
                        <el-option class="my-select-option" v-for="(item, i) in caseStatusList" :key="i + 'type'"
                            :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="案件来源" prop="caseBirth" class="search-item">
                    <el-select v-model="ruleForm.caseBirth">
                        <el-option v-for="(item, i) in caseBirthList" :key="i + 'birth'" :label="item.label"
                            :value="item.value" class="my-select-option"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                </el-form-item>
                <el-form-item>
                </el-form-item>
            </el-form>
        </div>
        <div class="sear-btn">
            <el-button type="primary" round plain size="small" @click="resetForm()">重置</el-button>
            <el-button type="primary" round size="small" @click="staticCaseList()">搜索</el-button>
        </div>
        <div class="down-btn">
            <button @click="showSuppDialog()">新增增补案件</button>
        </div>
        <el-table :data="tableData" :height="tableHeight" style="width: 100%;" v-loading="tableLoading">
            <el-table-column prop="organName" label="机构" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="seatUserName" label="坐席用户" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="caseNumber" label="报案号" width="120" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="carNumber" label="车牌号" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="createTime" label="案件发起时间" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="userName" label="渠道名称" width="120" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="repairCode" label="推修码" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="estimateMoney" label="估损金额" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="distributeTime" label="分配时间" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="caseTypeDesc" label="案件类型" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="caseMoney" label="定损金额" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="updateTime" label="定损完成时间" width="100" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="tasktypeDesc" label="定损类型" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="caseSource" label="案件来源" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="currWorkNode" label="核心案件状态" width="80" header-align="center" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="详情" width="100" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button @click="showCasedialog(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button @click="showscheduDialog(scope.row.taskId)" type="text" size="small">调度记录</el-button>
                    <el-button @click="xiepeiCaseDelete(scope.row.taskId)" type="text" size="small">删除</el-button>
                    <el-button @click="showAssignDialog(scope.row)" type="text" size="small">指派</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="ruleForm.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="ruleForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 详情 -->
        <case-detail ref="caseDetail" />
        <!-- 指派 -->
        <assign ref="assign" :assign-info="assignInfo" @search-list="staticCaseList" />
        <!-- 调度记录 -->
        <schedu-history ref="schedu" />
        <!-- 新增增补案件 -->
        <addsupp ref="addsupp" @search-list="staticCaseList" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import caseDetail from './components/caseDetails.vue'
import assign from './components/assign.vue'
import addsupp from './components/addsupp.vue'
import scheduHistory from './components/scheduHistory.vue'
import { staticCaseList, xiepeiCaseDelete, xiepeiExportStaticList, fetchTaskImageZip } from '@/api/case'
export default {
    components: { caseDetail, assign, scheduHistory, addsupp },
    data() {
        return {
            tableLoading: false,
            assignInfo: {},
            tableData: [],
            total: 0,
            tableHeight: window.innerHeight - 420,
            ruleForm: {
                pageSize: 10,
                currentPage: 1,
                caseType: '',
                taskStatus: '',
                caseBirth: '',
                seatUserId: '',
                startDate: this.$dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            },
            // 案件类型list
            caseTypeList: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '0',
                    label: '标的'
                },
                {
                    value: '1',
                    label: '三者'
                },
                {
                    value: '2',
                    label: '人伤'
                }
            ],
            caseStatusList: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '正在处理'
                },
                {
                    value: '2',
                    label: '待增补'
                },
                {
                    value: '3',
                    label: '已完成'
                },
                {
                    value: '4',
                    label: '未完成'
                }
            ],
            // 案件来源list
            caseBirthList: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '3',
                    label: '待分配'
                },
                {
                    value: '0',
                    label: '自动分配'
                },
                {
                    value: '1',
                    label: '人工指派'
                },
                {
                    value: '2',
                    label: '修理厂指定'
                },
                {
                    value: '4',
                    label: '新版地域分配'
                }
            ],

        }
    },
    created() {
        this.staticCaseList()
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    methods: {
        handleParams() {
            this.ruleForm.groupName = this.userInfo.group
            this.ruleForm.seatId = this.userInfo.userId
            this.ruleForm.pageCount = this.ruleForm.pageSize.toString()
            this.ruleForm.pageNum = this.ruleForm.currentPage.toString()
        },
        staticCaseList() {
            this.tableLoading = true
            this.handleParams()
            staticCaseList(this.ruleForm).then(res => {
                this.tableLoading = false
                if (res.totalCount) {
                    this.tableData = res.caseList.map(item => {
                        switch (item.taskType) {
                            case '0':
                                item.tasktypeDesc = '图片定损';
                                break;
                            case '1':
                                item.tasktypeDesc = '视频定损';
                                break;
                        }

                        switch (item.caseBirth) {
                            case '0':
                                item.caseSource = '自动分配';
                                break;
                            case '1':
                                item.caseSource = '人工指派';
                                break;
                            case '2':
                                item.caseSource = '修理厂指定';
                                break;
                            case '3':
                                item.caseSource = '待分配';
                                break;
                            case '4':
                                item.caseSource = '新版地域分配';
                                break;

                        }
                        switch (item.caseType) {
                            case "0":
                                item.caseTypeDesc = "标的";
                                break;
                            case "1":
                                item.caseTypeDesc = "三者";
                                break;
                            case "2":
                                item.caseTypeDesc = "人伤";
                                break;
                            case "3":
                                item.caseTypeDesc = "上门";
                                break;
                        }
                        return item
                    })
                }
                this.total = res.totalCount
            })
        },
        downloadExcel() {
            const loading = this.$loading({
                lock: true,
                text: '正在生成中，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.handleParams()
            xiepeiExportStaticList(this.ruleForm).then(res => {
                loading.close()
                let contentTypeHeader = res.headers["content-type"];
                let extractedFileName = "download.xls";
                if (contentTypeHeader) {
                    const fileNameMatch = contentTypeHeader.match(/filename=([^;]*)/);
                    if (fileNameMatch && fileNameMatch.length > 1) {
                        extractedFileName = decodeURI(fileNameMatch[1]);
                    }
                }
                const blob = new Blob([res.data], {
                    type: "application/vnd.ms-excel;",
                });
                const href = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.download = extractedFileName
                link.href = href
                link.click();
                window.URL.revokeObjectURL(link.href);
            }).catch(() => {
                loading.close()
            })
        },
        downloadImage() {
            const loading = this.$loading({
                lock: true,
                text: '正在压缩中，请稍后',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.handleParams()
            fetchTaskImageZip(this.ruleForm).then(res => {
                loading.close()
                if (res.zipUrl) {
                    const a = document.createElement('a');
                    a.href = res.zipUrl;
                    a.style.display = 'none';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            }).catch(() => {
                loading.close()
            })
        },
        xiepeiCaseDelete(taskId) {
            this.$confirm('您确认删除此任务吗？?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const params = {
                    groupId: this.userInfo.group,
                    taskId: taskId
                }
                xiepeiCaseDelete(params).then(res => {
                    this.staticCaseList()
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                })

            })
        },
        showSuppDialog() {
            this.$refs.addsupp.showDialog()
        },
        showscheduDialog(taskId) {
            this.$refs.schedu.taskAssignHistory(taskId);
        },
        showAssignDialog(caseInfo) {
            this.assignDialog = true;
            this.$refs.assign.showDialog()
            this.assignInfo = { ...caseInfo };
            this.assignInfo.accidentLabel = caseInfo.accidentType == "1" ? '水淹' : caseInfo.accidentType == "2" ? '火烧' : caseInfo.accidentType == "3" ? '碰撞' : ''
            this.assignInfo.cartLabel = caseInfo.carType == "1" ? '商用车' : caseInfo.carType == "2" ? '乘用车' : ''
        },
        showCasedialog(item) {
            this.$refs.caseDetail.getCaseInfo(item);
        },
        resetForm() {
            this.ruleForm = {
                pageSize: 10,
                currentPage: 1,
                caseType: '',
                taskStatus: '',
                caseBirth: '',
                seatUserId: '',
                startDate: this.$dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
                endDate: this.$dayjs().format('YYYY-MM-DD')
            }
        },
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.staticCaseList()
        },
        handleCurrentChange(val) {
            this.ruleForm.currentPage = val
            this.staticCaseList()
        }
    }
}
</script>
<style lang='scss' scoped>
.form-inline {
    display: flex;
    flex-wrap: wrap;
}

.form-inline .el-form-item {
    width: calc(100% / 3);
    margin: 0 auto;
    padding: 6px 20px;
}

::v-deep .form-inline .el-form-item .el-form-item__label {
    margin-left: 5%;
}

.form-inline .el-form-item .el-input,
.form-inline .el-form-item .el-select {
    width: 65%;
}

.sear-btn,
.down-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sear-btn .el-button {
    padding: 8px 35px;
    margin: 5px 40px 0 0;
}

.down-btn {
    justify-content: flex-end;
}

.down-btn button {
    height: 28px;
    line-height: 28px;
    background: none;
    border: 0;
    border-radius: 16px;
    outline: none;
    margin: 20px 20px 10px 6px;
    font-size: 14px;
    color: #409EFF;
}

.el-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
}

::v-deep .el-table tbody td .cell:empty::after {
    content: '— —' !important;
}
</style>
